<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>分配角色</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all" />
</head>
<body><div class="row">
    <form class="layui-form" method="POST">
        <table class="layui-table">
            <thead>
            <tr>
                <th lay-data="{field:'roleName', width:300}">角色名称</th>
                <th lay-data="{fixed: 'right', width: 60, align: 'center', toolbar: '#barDemo'}">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="" th:each="role : ${roles}">
                <td data-field="username">
                    <div class="layui-table-cell laytable-cell-1-username" th:text="${role.roleName}">
                        user-1
                    </div>
                </td>
                <td data-field="sex">
                    <div class="layui-table-cell laytable-cell-1-sex">
                        <div class="layui-form-item" pane="">
                            <div class="layui-input-block">
                                <input type="checkbox" name="roleId" lay-filter="itemChoose" lay-skin="primary" th:checked="${role.others.check}" th:value="${role.roleId}">
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <input type="hidden" name="staffId" th:value="${staffId}" id="staffId">
    </form>
</div>
<!-- 引用layer基本js -->
<script th:src="@{/plugins/layui/layui.js}"></script>
<script>
    layui.config({
        base: '../../build/js/',
        version: '1.0.1'
    }).use(['common', 'form'], function() {
        var $ = layui.jquery, common = layui.common, form = layui.form;

        // 复选框全部选择，自动选中全选按钮
        form.on('checkbox(itemChoose)',function(data){
            var flag = $(this).parent().find("input[type='checkbox']").prop("checked");
            $.ajax({
                type: "post",
                url: '/auth/staff/updateStaffRole.json',
                data: {"staffId": $("#staffId").val(), "operation": (flag == true ? 'add' : 'del'), "roleId": data.value},
                dataType: 'json',
                success: function (d) {
                    if(d.fail) {
                        common.layerErrorMsg(d.message);
                    }
                },
                error: function(d) {
                    common.layerErrorMsg("请求错误");
                }
            });
        });
    });
</script>
</body>
</html>